<template>
  <div>
    <div>
    <el-input v-model="formTable.title" placeholder="检索文章" style="width: 400px;" class="filter-item"></el-input>
    <el-button @click="getAll()" class="el-icon-search" style="color: white;background-color: blue"></el-button>
  </div>
    <el-table
        current-row-key="nid"
        :data="dataList"
        style="width: 100%">

      <el-table-column align="center"
                       prop="title"
      >
        <template slot-scope="scope">
          <a @click="showDialog(scope.row)" style="color:blue;cursor:pointer">{{scope.row.title}}</a>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看弹层 -->

    <div class="add-form">
      <el-dialog title="详情" :visible.sync="dialogFormVisibleShow">
        <el-row>
          {{formTable.title}}
        </el-row>
        <el-row>
          {{formTable.contents}}
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">关闭</el-button>
        </div>
      </el-dialog>

    </div>

  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "custom_searching",
  data () {
    return {
      dataList:[],
      dialogFormVisibleShow: false,
      formTable:{}
    }
  },
  methods: {

    getAll() {
      if (!this.formTable.title) {
        this.$message.warning("搜索项不能为空哦~");
        this.dataList = [];
        return;
      }else {
        // 组织参数，拼接url请求地址
        console.log(this.formTable.title);
        axios.get("/article-service/search?title="+this.formTable.title).then(res => {
          console.log(res.data.data);
          this.dataList = res.data.data;
          console.log(this.dataList);
        });
      }

    },

    showDialog(row) {
      this.formTable.title = row.title;
      this.formTable.contents = row.contents;
      this.dialogFormVisibleShow = true;
      console.log(this.formTable);
    },
    cancel() {
      this.dialogFormVisibleShow = false;
    },
  }

}
</script>

<style scoped>

</style>